<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春节倒计时</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#E63946',
                        secondary: '#FFB703',
                        dark: '#1D3557',
                        light: '#F1FAEE',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            .animate-pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen flex flex-col items-center justify-center p-4 font-sans">
    <div class="w-full max-w-3xl bg-white rounded-2xl shadow-xl overflow-hidden transform transition-all duration-500 hover:shadow-2xl">
        <!-- 顶部装饰条 -->
        <div class="h-2 bg-gradient-to-r from-primary to-secondary"></div>

        <!-- 主要内容区 -->
        <div class="p-6 md:p-10 text-center">
            <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-dark mb-4">春节倒计时</h1>
            <p class="text-gray-600 mb-8 text-[clamp(1rem,2vw,1.2rem)]">距离农历新年还有</p>

            <!-- 倒计时显示 -->
            <div class="mb-8">
                <div id="countdown" class="text-[clamp(3rem,15vw,8rem)] font-black text-primary mb-2 leading-tight text-shadow animate-pulse-slow">
                    <span id="days">0</span>
                </div>
                <div class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-6">天</div>
            </div>

            <!-- 当前日期 -->
            <div id="current-date" class="text-gray-500 mb-8 text-[clamp(1rem,2vw,1.2rem)]"></div>

            <!-- 春节信息 -->
            <div class="bg-light rounded-xl p-4 mb-6">
                <p class="text-gray-700 mb-2">下一个春节是：<span id="next-cny-date" class="font-medium text-dark"></span></p>
                <p class="text-gray-700">农历<span id="next-cny-year" class="font-medium text-dark"></span>年正月初一</p>
            </div>

            <!-- 装饰元素 -->
            <div class="flex justify-center space-x-4 mt-8">
                <i class="fa-solid fa-firecracker text-secondary text-2xl animate-float" style="animation-delay: 0s"></i>
                <i class="fa-solid fa-gift text-secondary text-2xl animate-float" style="animation-delay: 0.5s"></i>
                <i class="fa-solid fa-calendar-check text-secondary text-2xl animate-float" style="animation-delay: 1s"></i>
            </div>
        </div>

        <!-- 底部 -->
        <div class="bg-dark text-white p-4 text-center text-sm">
            <p>愿新年，胜旧年 <i class="fa-solid fa-heart text-primary ml-1"></i></p>
        </div>
    </div>

    <script>
        // 计算春节日期的函数
        function calculateChineseNewYear(currentYear) {
            // 这里使用简化的算法，实际春节日期需要更复杂的农历计算
            // 以下数据是2024-2030年的春节日期，实际应用中可能需要更完善的农历算法
            const springFestivalDates = {
                2024: new Date(2024, 1, 10),  // 2024年2月10日
                2025: new Date(2025, 0, 29),  // 2025年1月29日
                2026: new Date(2026, 1, 17),  // 2026年2月17日
                2027: new Date(2027, 1, 6),   // 2027年2月6日
                2028: new Date(2028, 1, 25),  // 2028年2月25日
                2029: new Date(2029, 1, 13),  // 2029年2月13日
                2030: new Date(2030, 2, 3)    // 2030年3月3日
            };

            const currentDate = new Date();
            const currentMonth = currentDate.getMonth();
            const currentDay = currentDate.getDate();

            // 确定使用哪一年的春节日期
            let targetYear = currentYear;
            if (currentMonth > 1 || (currentMonth === 1 && currentDay > 20)) {
                targetYear = currentYear + 1;
            }

            // 如果不在预定义范围内，使用一个估计值（实际应用中需要更完善的算法）
            if (!springFestivalDates[targetYear]) {
                // 估计值：假设春节在2月1日左右
                return {
                    date: new Date(targetYear, 1, 1),
                    yearName: '未知'
                };
            }

            // 生肖年份
            const zodiacYears = ['龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪', '鼠', '牛', '虎', '兔'];
            const startYear = 2024; // 2024年是龙年
            const offset = (targetYear - startYear) % 12;
            const zodiacIndex = offset >= 0 ? offset : offset + 12;
            const yearName = zodiacYears[zodiacIndex];

            return {
                date: springFestivalDates[targetYear],
                yearName: yearName
            };
        }

        // 更新倒计时
        function updateCountdown() {
            const now = new Date();
            const currentYear = now.getFullYear();

            // 获取下一个春节的日期
            const nextCny = calculateChineseNewYear(currentYear);

            // 计算剩余天数
            const timeDiff = nextCny.date - now;
            const daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));

            // 更新DOM
            document.getElementById('days').textContent = daysLeft;
            document.getElementById('current-date').textContent = `今天是 ${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
            document.getElementById('next-cny-date').textContent = `${nextCny.date.getFullYear()}年${nextCny.date.getMonth() + 1}月${nextCny.date.getDate()}日`;
            document.getElementById('next-cny-year').textContent = nextCny.yearName;
        }

        // 初始化
        updateCountdown();

        // 每天更新一次
        setInterval(updateCountdown, 24 * 60 * 60 * 1000);
    </script>
</body>
</html>
 